<!--
 * @Author: WangLong
 * @Date: 2024-01-29 09:23:51
 * @LastEditTime: 2024-02-23 16:42:07
 * @LastEditors: WangLong
 * @Description: 
 * @FilePath: \front_erp\src\views\stock\returnApply\dtl.vue
-->
<template>
  <div v-loading="detailInfoShow">
    <div class="requestAdd">
      <!-- 内容信息 -->
      <el-tabs type="border-card">
        <el-tab-pane label="产品评估信息">
          <flightdataAdd
            ref="productLibraryAddRef"
            v-model:productLibraryAddShow="productLibraryAddShow"
            :pageType="pageType"
            :FormTemplate="detailFormTemplate"
          />
        </el-tab-pane>
        <!-- <el-tab-pane label="工单信息">
          <el-table
            v-loading="loading"
            :data="projectList"
            border
            height="64vh"
            :header-cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              type="index"
              label="序号"
              :index="indexMethod"
              width="70"
              align="center"
            />
            <el-table-column
              label="工单名称"
              prop="workOrderName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="申请人"
              prop="applicantName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="创建时间"
              prop="createTime"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="业务人员"
              prop="userName"
              :show-overflow-tooltip="true"
            />
            <el-table-column label="施工省市区" :show-overflow-tooltip="true">
              <template #default="{ row }">
                {{ row.provinceName }}{{ row.cityName }}{{ row.areaName }}
              </template>
            </el-table-column>
            <el-table-column
              label="详细地址"
              prop="address"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="工单类型"
              prop="workOrderTypeName"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="施工状态"
              prop="constructionStatusName"
              :show-overflow-tooltip="true"
            />
          </el-table>
        </el-tab-pane> -->
      </el-tabs>
    </div>
    <div class="search-button">
      <el-button class="btn direction" @click="handleBack()"
        ><el-icon class="icon" color="#fff"> <Back /> </el-icon
        >返回</el-button
      >
    </div>
  </div>
</template>

<script setup>
import flightdataAdd from "./flightdataAdd.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getproductdetailApi } from "@/api/operation/flightdata.js";
const props = defineProps({
  // 操作类型
  pageType: {
    type: String,
    default: "add",
  },
});
// 路由
const route = useRoute();
const emit = defineEmits([
  // 刷新父组件表格数据
  "refreshList",
]);
// 详情加载效果
const detailInfoShow = ref(false);

// 新增组件显隐
const productLibraryAddShow = ref(false);
// 新增维修显隐
const ServiceAddShow = ref(true);

// 退库表单数据模板
const requestFormTemplate = {};
const data = reactive({
  // 客户表单
  requestForm: JSON.parse(JSON.stringify(requestFormTemplate)),
});

// 工单列表
const projectList = ref([]);
// 表格加载效果
const loading = ref(false);

//详情数据
let detailFormTemplate = ref({});

/**
 * @description: 处理详情信息
 * @param {Number} id
 */
const handleDetailInfo = async (id) => {
  detailInfoShow.value = true;
  let res = await getproductdetailApi(id);
  if (res.code == 200) {
    detailFormTemplate.value = res.data;
    detailInfoShow.value = false;
  }
};
/**
 * @description: 返回
 */
const handleBack = (val) => {
  emit("update:flightdataAdddetailShow", false);
  emit("refreshList", false);
};

defineExpose({
  handleDetailInfo,
});
onMounted(() => {});
</script>

<style lang="scss" scoped>
.requestAdd {
  padding: 20px 20px;
  width: 100%;
  height: 100%;
  .request-info {
    padding: 20px 20px 5px 20px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .contact-info {
    padding-top: 20px;
    .table-operate {
      cursor: pointer;
      .el-button {
        height: 28px;
      }
    }
  }

  :deep(.el-table) {
    th.el-table__cell {
      background: #f8f8f8 !important;
    }
  }
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 268px !important;
    height: 34px !important;
  }
  .search-input {
    width: 268px;
    height: 34px;
  }
  .image-content {
    width: 100%;
    line-height: 0px;
    overflow: auto;
  }
}
.auto-top {
  width: 100%;
  position: absolute;
  top: 0px;
  display: flex;
  font-weight: bold;
}
.auto-item {
  width: 125px;
  text-align: center;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示超出部分 */
}
.el-autocomplete .el-autocomplete-suggestion {
  max-height: 200px; /* 设置最大高度 */
  overflow-y: auto; /* 超出高度时显示滚动条 */
}
</style>
